<script setup lang="ts">
// vue
import { useMemberStore } from '@/stores'
import { ref } from 'vue'
// icon
import rightArrow from '@/static/icon/common/right_arrow.svg'
import WaitPay from '@/static/icon/order/WaitPay.svg'
import WaitSend from '@/static/icon/order/WaitSend.svg'
import WaitReceive from '@/static/icon/order/WaitReceive.svg'
import pickup from '@/static/icon/order/pickup.svg'
// api
import { getMemberOrderHandleCountAPI } from '@/services/order'
// 组件
import iconContainer from '@/components/container/icon-container.vue'
import type { OrderHandleCount } from '@/types/order'
import { onShow } from '@dcloudio/uni-app'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 订单选项
const orderTypes = [
  { type: 1, text: '待付款', icon: WaitPay },
  { type: 2, text: '待发货', icon: WaitSend },
  { type: 3, text: '待收货', icon: WaitReceive },
  { type: 7, text: '待自提', icon: pickup },
]

/**
 * 每次显示页面时触发
 */
onShow(() => {
  getMemberOrderHandleCountData()
})

// 创建用户仓库
const memberStore = useMemberStore()

const orderHandleCountData = ref<OrderHandleCount[]>()

/**
 * 获取每个订单未处理的数量
 */
const getMemberOrderHandleCountData = async () => {
  // 判断用户是否登录
  if (!memberStore.profile) {
    return
  }
  const result = await getMemberOrderHandleCountAPI()
  orderHandleCountData.value = result.result
}

/**
 * 判断订单类型是否为禁用状态
 */
const checkOrderTypeDisabled = (type: number) => {
  // 在 orderHandleCountData 找到type和status匹配的项
  const item = orderHandleCountData.value?.find((item) => item.status === type)
  return item?.count !== 0 && item?.count !== undefined
}
</script>

<template>
  <scroll-view class="viewport" scroll-y enable-back-to-top>
    <!-- 背景图片 -->
    <image
      src="https://www.diulegemingzi.com/api/image/get/2/bg-image.jpg"
      class="bg-image"
      mode="aspectFill"
    />
    <!-- 个人资料 -->
    <view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <!-- 情况1：已登录 -->
      <view class="overview" v-if="memberStore.profile">
        <navigator url="/pagesMember/profile/profile" hover-class="none">
          <!-- 头像 -->
          <image
            class="avatar"
            mode="aspectFill"
            :src="
              memberStore.profile.avatar
                ? memberStore.profile.avatar
                : 'https://www.diulegemingzi.com/api/image/get/2/logo.png'
            "
          ></image>
        </navigator>
        <view class="meta">
          <view class="nickname">
            {{ memberStore.profile.nickname || memberStore.profile.phone }}
          </view>
          <navigator
            class="extra"
            url="/pagesMember/profile/profile"
            hover-class="none"
          >
            <text class="update">更新头像昵称</text>
          </navigator>
        </view>
      </view>
      <!-- 情况2：未登录 -->
      <view class="overview" v-else>
        <navigator url="/pages/login/login" hover-class="none">
          <image
            class="avatar gray"
            mode="aspectFill"
            src="https://www.diulegemingzi.com/api/image/get/2/logo.png"
          ></image>
        </navigator>
        <view class="meta">
          <navigator
            url="/pages/login/login"
            hover-class="none"
            class="nickname"
          >
            未登录
          </navigator>
          <view class="extra">
            <text class="tips">点击登录账号</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 我的订单 -->
    <view class="orders animation-slide-top shadow bg-blue">
      <view class="title">
        我的订单
        <navigator
          class="navigator"
          :url="
            memberStore.profile
              ? '/pagesOrder/list/list?type=0'
              : '/pages/login/login'
          "
          hover-class="none"
          enable-flex
        >
          查看全部订单<text class="icon-right"></text>
        </navigator>
      </view>
      <view class="section">
        <!-- 订单 -->
        <navigator
          v-for="(item, index) in orderTypes"
          :key="item.type"
          hover-class="none"
          :url="
            memberStore.profile
              ? `/pagesOrder/list/list?type=${item.type}`
              : '/pages/login/login'
          "
          class="navigator order-item animation-slide-right"
          :style="[{ animationDelay: (index + 1) * 0.3 + 's' }]"
        >
          <view class="icon-container-wrapper">
            <iconContainer :icon="item.icon" :size="'60rpx'"></iconContainer>
            <text
              class="badge"
              :class="{ isShow: checkOrderTypeDisabled(item.type) }"
              >{{
                orderHandleCountData?.find(
                  (orderCount) => orderCount.status === item.type,
                )?.count
              }}
            </text>
          </view>
          <text>{{ item.text }}</text>
        </navigator>
        <!-- 客服 -->
        <!-- <view
          class="order-item animation-slide-right"
          :style="[{ animationDelay: (orderTypes.length + 1) * 0.3 + 's' }]"
        >
          <iconContainer :icon="Customer" :size="'60rpx'"></iconContainer>
          <button class="contact" open-type="contact">售后</button>
        </view> -->
      </view>
    </view>

    <!-- 选项 -->
    <view class="options animation-slide-bottom">
      <!-- 个人信息 -->
      <view
        class="item animation-slide-bottom"
        :style="{ animationDelay: '0.3s' }"
      >
        <navigator
          class="navigator"
          :url="
            memberStore.profile
              ? '/pagesMember/profile/profile'
              : '/pages/login/login'
          "
          hover-class="none"
        >
          <text class="title shadow bg-blue"> 个人信息 </text>
          <iconContainer
            class="icon"
            :icon="rightArrow"
            :size="'50rpx'"
          ></iconContainer>
        </navigator>
      </view>

      <!-- 收货地址 -->
      <view
        class="item animation-slide-bottom"
        :style="{ animationDelay: '0.6s' }"
      >
        <navigator
          class="navigator"
          hover-class="none"
          :url="
            memberStore.profile
              ? '/pagesMember/address/address'
              : '/pages/login/login'
          "
        >
          <text class="title shadow bg-blue"> 收货地址 </text>
          <iconContainer
            class="icon"
            :icon="rightArrow"
            :size="'50rpx'"
          ></iconContainer>
        </navigator>
      </view>

      <!-- 联系客服 -->
      <view
        class="item animation-slide-bottom"
        :style="{ animationDelay: '0.9s' }"
      >
        <navigator class="navigator" url="" hover-class="none">
          <text class="title shadow bg-blue"> 联系客服 </text>
          <iconContainer
            class="icon"
            :icon="rightArrow"
            :size="'50rpx'"
          ></iconContainer>
        </navigator>
      </view>

      <view
        class="item animation-slide-bottom"
        :style="{ animationDelay: '1.2s' }"
      >
        <navigator
          class="navigator"
          url="/pagesMember/settings/settings"
          hover-class="none"
        >
          <text class="title shadow bg-blue"> 设置 </text>
          <iconContainer
            class="icon"
            :icon="rightArrow"
            :size="'50rpx'"
          ></iconContainer>
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  // 灰色
  background-color: rgb(240, 240, 240);
}

.viewport {
  height: 100%;
  background-repeat: no-repeat;
  background-color: #f7f7f8;
  background-size: 80% auto;

  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: 0;
  }
}

/* 用户信息 */
.profile {
  margin-top: 20%;
  position: relative;
  color: #eee;

  .overview {
    display: flex;
    height: 120rpx;
    padding: 0 36rpx;
  }

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #eee;
  }

  .gray {
    filter: grayscale(100%);
  }

  .meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 30rpx;
    padding: 16rpx 0;
    margin-left: 20rpx;
  }

  .nickname {
    max-width: 350rpx;
    margin-bottom: 16rpx;
    font-size: 30rpx;
    color: #000;

    background-color: #dbf2f7;
    // 圆角
    border-radius: 20rpx 50rpx 20rpx 50rpx;
    // 内边距
    padding: 10rpx 20rpx;

    white-space: nowrap;
  }

  .extra {
    display: flex;
    font-size: 20rpx;
  }

  .tips {
    font-size: 22rpx;
  }

  .update {
    padding: 3rpx 10rpx 1rpx;
    color: #eee;
    border: 1rpx solid #eee;
    margin-right: 10rpx;
    border-radius: 10rpx;
  }
}

/* 我的订单 */
.orders {
  position: relative;
  padding: 30rpx;
  margin: 50rpx 30rpx 0;
  background-color: rgb(227, 249, 255);

  border-radius: 10rpx;

  .title {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    color: #1e1e1e;

    .navigator {
      font-size: 24rpx;
      color: #939393;
      float: right;
    }
  }

  .section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 40rpx 20rpx 10rpx;
    .navigator,
    .contact {
      text-align: center;
      font-size: 24rpx;
      color: #333;
      &::before {
        display: block;
        font-size: 60rpx;
        color: #ff9545;
      }
    }
    .contact {
      padding: 0;
      margin: 0;
      border: 0;
      background-color: transparent;
      line-height: inherit;
    }
  }
}

.order-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.icon-container-wrapper {
  position: relative;
  display: inline-block;

  .badge {
    position: absolute;
    top: -10rpx;
    right: -20rpx;
    background-color: red;
    color: white;
    font-size: 20rpx;
    border-radius: 50%;
    padding: 4rpx 8rpx;
    line-height: 1;
    opacity: 0;

    &.isShow {
      opacity: 1;
    }
  }
}

/* 选项 */
.options {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  width: 80%;
  // 上外边距
  margin-top: 50rpx;

  .item {
    // 下外边框
    border-bottom: 5rpx solid #eee;
    // 上下内边距
    padding: 20rpx 0;

    .navigator {
      display: flex;
      justify-content: space-between;

      .title {
        color: #444444;
        background-color: #f9e17e;
        // 圆角
        border-radius: 20rpx 50rpx 20rpx 50rpx;
        // 内边距
        padding: 10rpx 20rpx;
        width: 70%;
      }

      .icon {
        width: 50rpx;
      }
    }
  }
}
</style>
